M

MLOG

Türkçe

Ekran okuyucu uyumluluğunu artırmak ve küresel bir kitle için web sitesi erişilebilirliğini iyileştirmek amacıyla ARIA etiketlerini kullanmaya yönelik kapsamlı bir rehber.

Ekran Okuyucu Uyumluluğu: Erişilebilirlik için ARIA Etiketlerinde Uzmanlaşma

Günümüzün dijital dünyasında, tüm kullanıcılar için erişilebilirliği sağlamak sadece en iyi uygulama değil, aynı zamanda temel bir gerekliliktir. Web erişilebilirliğinin en önemli yönlerinden biri, içeriği ekran okuyucu kullanıcıları için kullanılabilir hale getirmektir. ARIA (Accessible Rich Internet Applications - Erişilebilir Zengin İnternet Uygulamaları) etiketleri, görsel sunum ile ekran okuyuculara iletilen bilgi arasındaki boşluğu doldurmada hayati bir rol oynar. Bu kapsamlı rehber, ARIA etiketlerinin gücünü, doğru kullanımlarını ve küresel bir kitle için daha kapsayıcı bir web deneyimine nasıl katkıda bulunduklarını keşfedecektir.

ARIA Etiketleri Nedir?

ARIA etiketleri, doğası gereği erişilebilir olmayabilecek öğeler için ekran okuyuculara açıklayıcı metin sağlayan HTML nitelikleridir. Bir ekran okuyucunun normalde öğenin rolüne, adına ve durumuna göre duyuracağı bilgiyi tamamlamak veya geçersiz kılmak için bir yol sunarlar. Esasen ARIA etiketleri, etkileşimli öğelerin amacını ve işlevini netleştirerek görme engelli kullanıcıların web içeriğinde etkili bir şekilde gezinmesini ve etkileşimde bulunmasını sağlar.

Bunu, etkileşimli öğeler için alt metin sağlamak gibi düşünebilirsiniz. `alt` nitelikleri resimleri tanımlarken, ARIA etiketleri butonlar, bağlantılar, form alanları ve dinamik içerik gibi şeylerin *işlevini* tanımlar.

ARIA Etiketleri Neden Önemlidir?

ARIA Niteliklerini Anlamak: aria-label, aria-labelledby ve aria-describedby

Öğeleri etiketlemek için kullanılan üç temel ARIA niteliği vardır:

1. aria-label

aria-label niteliği, bir öğe için erişilebilir ad olarak kullanılacak bir metin dizesini doğrudan sağlar. Bunu, görünür etiket yeterli olmadığında veya mevcut olmadığında kullanın.

Örnek:

Bir "X" simgesiyle temsil edilen bir kapatma düğmesini düşünün. Görsel olarak ne işe yaradığı açıktır, ancak bir ekran okuyucunun açıklamaya ihtiyacı vardır.

<button aria-label="Close">X</button>

Bu durumda, ekran okuyucu "Kapat düğmesi" anonsunu yaparak düğmenin işlevi hakkında net bir anlayış sağlar.

Pratik Örnek (Uluslararası):

Küresel satış yapan bir e-ticaret sitesi bir alışveriş sepeti simgesi kullanabilir. ARIA olmadan, bir ekran okuyucu sadece "bağlantı" anonsu yapabilir. `aria-label` ile şöyle olur:

<a href="/cart" aria-label="View Shopping Cart"><img src="cart.png" alt="Shopping Cart Icon"></a>

Bu, küresel erişilebilirliği sağlamak için diğer dillere kolayca çevrilebilir.

2. aria-labelledby

aria-labelledby niteliği, bir öğeyi, etiketi olarak hizmet eden sayfadaki başka bir öğeyle ilişkilendirir. Etiketleme öğesinin id'sini kullanır. Bu, görünür bir etiket zaten mevcut olduğunda ve bunu erişilebilir ad olarak kullanmak istediğinizde kullanışlıdır.

Örnek:

<label id="name_label" for="name_input">Name:</label>
<input type="text" id="name_input" aria-labelledby="name_label">

Burada, giriş alanı, erişilebilir adı olarak (id'si ile tanımlanan) <label> öğesindeki metni kullanır. Ekran okuyucu "Ad: düzenleme metni" anonsunu yapacaktır.

Pratik Örnek (Formlar):

Karmaşık formlar için, doğru etiketlemeyi sağlamak çok önemlidir. aria-labelledby'ı doğru kullanmak, etiketleri ilgili giriş alanlarına bağlayarak formu erişilebilir hale getirir. Çok adımlı bir adres formunu düşünün:

<label id="street_address_label" for="street_address">Street Address:</label>
<input type="text" id="street_address" aria-labelledby="street_address_label">

<label id="city_label" for="city">City:</label>
<input type="text" id="city" aria-labelledby="city_label">

Bu yaklaşım, etiketler ve alanlar arasındaki ilişkinin ekran okuyucu kullanıcıları için açık olmasını sağlar.

3. aria-describedby

aria-describedby niteliği, bir öğe için ek bilgi veya daha ayrıntılı bir açıklama sağlamak için kullanılır. *Adı* sağlayan aria-labelledby'ın aksine, aria-describedby bir *açıklama* sağlar.

Örnek:

<input type="text" id="password" aria-describedby="password_instructions">
<p id="password_instructions">Password must be at least 8 characters long and contain one uppercase letter, one lowercase letter, and one number.</p>

Bu durumda, ekran okuyucu giriş alanını (varsa etiketini) anons edecek ve ardından id'si "password_instructions" olan paragrafın içeriğini okuyacaktır. Bu, kullanıcı için yararlı bir bağlam sağlar.

Pratik Örnek (Hata Mesajları):

Bir giriş alanında hata olduğunda, hata mesajına bağlanmak için aria-describedby kullanmak harika bir uygulamadır. Bu, ekran okuyucu kullanıcısının hatadan anında haberdar olmasını sağlar.

<input type="text" id="email" aria-describedby="email_error">
<p id="email_error" class="error-message">Please enter a valid email address.</p>

ARIA Etiketlerini Kullanmak İçin En İyi Uygulamalar

Kaçınılması Gereken Yaygın ARIA Etiketi Hataları

Pratik Örnekler ve Kullanım Alanları

1. Özel Kontroller

Özel kontroller (örneğin, özel bir kaydırıcı) oluştururken, erişilebilirlik sağlamak için ARIA etiketleri esastır. Muhtemelen etiketlere ek olarak ARIA rollerini, durumlarını ve özelliklerini kullanmanız gerekecektir.

<div role="slider" aria-label="Volume" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></div>

Bu örnekte, aria-label kaydırıcının adını (Volume) sağlarken, diğer ARIA nitelikleri aralığı ve mevcut değeri hakkında bilgi verir. Kaydırıcı değiştikçe aria-valuenow değerini güncellemek için JavaScript kullanılacaktır.

2. Dinamik İçerik Güncellemeleri

Tek sayfa uygulamaları (SPA'lar) veya AJAX'a yoğun şekilde dayanan web siteleri için, içerik dinamik olarak değiştiğinde ARIA etiketlerini güncellemek çok önemlidir.

Örneğin, bir bildirim sistemini düşünün. Yeni bir bildirim geldiğinde, bir ARIA canlı bölgesini güncelleyebilirsiniz:

<div aria-live="polite" id="notification_area"></div>

Daha sonra JavaScript, bu div'e bildirim metnini eklemek için kullanılacak ve bu metnin ekran okuyucu tarafından anons edilmesini sağlayacaktır. aria-live="polite" önemlidir; ekran okuyucuya güncellemeyi boşta olduğunda anons etmesini söyler, böylece kullanıcının mevcut görevini kesintiye uğratmaktan kaçınılır.

3. Etkileşimli Grafikler ve Diyagramlar

Grafikleri ve diyagramları erişilebilir kılmak zor olabilir. ARIA etiketleri, verilerin metinsel açıklamalarını sağlamaya yardımcı olabilir.

Örneğin, bir çubuk grafik, her çubuğun değerini açıklamak için aria-label kullanabilir:

<div role="img" aria-label="Bar chart showing sales for each quarter">
  <div role="list">
    <div role="listitem" aria-label="Quarter 1: $100,000"></div>
    <div role="listitem" aria-label="Quarter 2: $120,000"></div>
    <div role="listitem" aria-label="Quarter 3: $150,000"></div>
    <div role="listitem" aria-label="Quarter 4: $130,000"></div>
  </div>
</div>

Daha karmaşık grafikler, aria-describedby kullanılarak bağlanan bir tablo veri temsili veya ayrı bir metinsel özet gerektirebilir.

Erişilebilirlik Test Araçları

Birkaç araç, potansiyel ARIA etiketi sorunlarını belirlemenize yardımcı olabilir:

Küresel Hususlar

Küresel bir kitle için ARIA etiketleri uygularken aşağıdakileri göz önünde bulundurun:

Sonuç

ARIA etiketleri, ekran okuyucu uyumluluğunu artırmak ve web erişilebilirliğini iyileştirmek için güçlü bir araçtır. aria-label, aria-labelledby ve aria-describedby'ın doğru kullanımını anlayarak ve en iyi uygulamaları takip ederek, küresel bir kitle için daha kapsayıcı ve kullanıcı dostu bir web deneyimi yaratabilirsiniz. Her zaman anlamsal HTML'e öncelik vermeyi, ekran okuyucularla kapsamlı bir şekilde test etmeyi ve farklı geçmişlere sahip kullanıcıların ihtiyaçlarını göz önünde bulundurmayı unutmayın. Erişilebilirliğe yatırım yapmak sadece bir uyumluluk meselesi değil; gerçekten herkes için erişilebilir bir web yaratma taahhüdür.

Kaynaklar